<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 400px;
            height: 500px;
            background-color: antiquewhite;
            text-align: center;
        }
        
        button {
            width: 100px;
        }
        
        .content {
            display: none;
        }
        
        #box>div.content:nth-child(4) {
            display: block;
        }
    </style>

</head>

<body>

    <div id="box">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <div class="content">
            我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我
        </div>
        <div class="content">
            你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你你
        </div>

        <div class="content">
            他他他他他他他他他他他他他他他他他他他他他他他他他他他他他他他他他他他他他他
        </div>


    </div>


</body>
<script>
    window.onload = function() {
        var button = document.getElementsByTagName('button');
        var content = document.getElementsByClassName('content');
        for (var i = 0; i < button.length; i++) {
            button[i].onclick = ((index) => {
                return () => {
                    for (var i = 0; i < content.length; i++) {
                        content[i].style.display = 'none';
                    }
                    content[index].style.display = 'block';
                }
            })(i);
        }
    }
</script>

</html>